<template>
	<view class="mine">
		<view class="bg_img"></view>
		<view class="user_info">
			<view class="user_info_left">
				<view v-if="userInfo.avatarUrl" class="user_avatar" @click="checkLogin('/pages/mine/means')"
					url="/pages/mine/means" hover-class="none">
					<image :src="userInfo.avatarUrl" mode="widthFix" class="image"></image>
					<view class="edit">
						<image src="@/static/ic_edit.png" mode="widthFix" class="img"></image>
					</view>
				</view>

				<view v-else class="user_avatar" @click="checkLogin('/pages/mine/means')" 
					url="/pages/mine/means" hover-class="none">
					<image src="@/static/avatar.png" mode="widthFix" class="image-default"></image>
					<view v-if="userInfo" class="edit">
						<image src="@/static/ic_edit.png" mode="widthFix" class="img"></image>
					</view>
				</view>

				<view>
					<view class="user_name">
						<view style="color:#FFF" v-if="!userInfo" @click="gotoLogin">点击登录</view>
						<template v-else>
							<view style="color:#FFF" v-if="userInfo.nickName">{{ userInfo.nickName}}</view>
							<view style="color:#FFF" v-else>微信用户</view>
						</template>
					</view>
					<image v-if="userInfo && userInfo.isPartner" class="qr-code" src="@/static/icon/mine/ic_qrcode.png"
						@click="onQRCode"></image>
				</view>
			</view>

			<view>
				<view class="user_info_right" v-if="userInfo.isPartner" @click="joinPartner">
					<image src="@/static/ic_partner.png" mode=""></image>
					<view style="color:#FFF">合伙人</view>
				</view>
				<view class="user_info_right" style="margin-top: 10rpx;" @click="gotoIntegral">
					<image src="@/static/ic_user_points.png" mode=""></image>
					<view style="color:#FFF">{{userInfo.integralNum||0}}</view>
				</view>
			</view>
		</view>
		<view class="order_nav">
			<view @click="checkLogin('/pages/mine/order/index?tabIndex=1')" class="order_nav_item">
				<image src="/static/icon/mine/ic_waiting_pay.png" mode=""></image>
				待付款
			</view>
			<view @click="checkLogin('/pages/mine/order/index?tabIndex=2')" class="order_nav_item">
				<image src="/static/icon/mine/ic_waiting_deliver.png" mode=""></image>
				待发货
			</view>
			<view @click="checkLogin('/pages/mine/order/index?tabIndex=3')" class="order_nav_item">
				<image src="/static/icon/mine/ic_waiting_confirm.png" mode=""></image>
				待收货
			</view>
			<view @click="checkLogin('/pages/mine/order/index')" class="order_nav_item">
				<image src="/static/icon/mine/ic_all_order.png" mode=""></image>
				全部订单
			</view>
		</view>

		<view class="list">
			<navigator hover-class="none" class="item" url="/pages/member/member" v-if="userInfo">
				<view class="item_name">
					<image src="../../static/icon/mine/ic_address_manage.png" mode=""></image>
					会员权益
				</view>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</navigator>
			<navigator hover-class="none" class="item" url="/pages/mine/address/index">
				<view class="item_name">
					<image src="../../static/icon/mine/ic_address_manage.png" mode=""></image>
					常用地址
				</view>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</navigator>
			<navigator hover-class="none" class="item" url="/pages/mine/invoice/invoice">
				<view class="item_name">
					<image src="../../static/icon/mine/ic_invoice.png"></image>
					我的发票
				</view>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</navigator>
			<navigator hover-class="none" class="item" url="/pages/mine/aboutUs">
				<view class="item_name">
					<image src="../../static/icon/mine/ic_about_us.png"></image>
					关于我们
				</view>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</navigator>
			<!-- <navigator hover-class="none" class="item" url="/pages/agent/pages/login/index">
				<view class="item_name">
					<image src="../../static/icon/mine/ic_partner.png"></image>
					代理商登录
				</view>
				<u-icon name="arrow-right" color="#909399"></u-icon>
			</navigator> -->
			
		</view>
	</view>
</template>

<script>
	import config from '@/config';
	import {
		countOrderStatus,
	} from '@/api/mine.js';
	import adGoods from '@/components/adGoods/index'
	import {
		mapState
	} from 'vuex'
	import EventBusMacro from '@/plugins/EventBus/eventBusMacro.js'
	import {
		ThemeMixin
	} from '@/mixins/theme/xThemeMixin.js'

	export default {
		mixins: [ThemeMixin],
		components: {
			adGoods,
		},
		computed: {
			...mapState(['userPoints', 'userInfo'])
		},
		data() {
			return {
				imageUrl: config.imageUrl,
				orderInfo: {},
				imgUrl: '',
				isShow: false,
				list: [{
						name: 'rmb-circle',
						title: '未支付',
						code: 10,
						quantity: 0
					},
					{
						name: 'car',
						title: '待发货',
						code: 20,
						quantity: 0
					},
					{
						name: 'bag',
						title: '待收货',
						code: 30,
						quantity: 0
					},
					{
						name: 'grid',
						title: '已完成',
						code: 40,
						quantity: 0
					},
					{
						name: 'grid',
						title: '已取消',
						code: 50,
						quantity: 0
					}
				],
			};
		},

		onLoad() {
			this.$events.on(EventBusMacro.EB_LOGIN_SCUCCESS, this.onLoginSuccess)
		},
		
		onBeforeDestroy() {
			this.$events.off(EventBusMacro.EB_LOGIN_SCUCCESS, this.onLoginSuccess)
		},
		
		methods: {
			onQRCode() {
				uni.navigateTo({
					url: '/pages/mine/qrcode'
				})
				console.log("onQRCode")
			},
			onLoginSuccess() {
				this.loadData()
			},
			
			loadData() {
				this.imgUrl = this.$url;
				// this.$store.dispatch('getClientInfo')
			},

			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			
			callService(e) {
				uni.makePhoneCall({
					phoneNumber: e
				})
			},
			
			//检测是否登陆
			checkLogin(e) {
				if (!this.userInfo) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				} else {
					uni.navigateTo({
						url: e
					})
				}
			},

			joinPartner() {
				uni.navigateTo({
					url: '/pages/login/partner/partner'
				})
			},
			gotoIntegral() {
				uni.navigateTo({
					url: '/packageIntegral/pages/mine/integral/shop'
				})
			},
		}
	};
</script>


<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";
	.user_name {
		display: flex;
		align-items: center;

	}

	.qr-code {
		width: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
	}
</style>


<style lang="scss" scoped>
	@import "@/mixins/theme/xTheme.scss";
.mine{
	background-color: #f9f9f9;
}
	.user_info_left {
		display: flex;
		align-items: center;
	}

	.user_info_right {
		display: flex;
		align-items: center;

		&>image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}
	}

	.user_vip {
		display: flex;
		margin-top: 10rpx;
		align-items: center;
	}

	.user_vip>text {
		margin: 0 10rpx;
	}

	.user_vip>image {
		width: 36rpx;
		height: 36rpx;
	}


	.nav_box {
		position: absolute;
		top: 12rpx;
		right: 38rpx;
	}

	.user-avatar {
		border-radius: 58rpx;
		display: flex;
		padding-top: 20rpx;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		margin-bottom: 8px;
	}

	.bg_img {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		height: 320rpx;
		background: $x-theme-card-background;
	}

	.user_info {
		width: 100%;
		padding: 72rpx 36rpx 0rpx;
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;
		color: #fff;
	}



	.user_avatar {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 60rpx;
		background: #F4F4F6;


		.image {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			border-radius: 60rpx;
		}

		.image-default {
			width: 120rpx;
		}

		.edit {
			position: absolute;
			right: -4rpx;
			bottom: 0rpx;
			width: 48rpx;
			height: 48rpx;
			background-color: #000;
			border-radius: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.order_nav {
		width: 710rpx;
		margin: 30rpx auto 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx;
		position: relative;
		border: 2rpx solid #F5F5F5;
		box-shadow: 1rpx 1rpx #F5F5F5;
	}

	.order_nav_item {
		width: 160rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.order_nav_item>image {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto 10rpx;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		margin: 0 auto 20rpx;
		background-color: #e6e6e6;
	}

	.nickname {
		font-weight: 600;
		text-align: center;
		color: #fff;
	}

	.list {
		// background-color: #FFF;
		margin: 0 auto;
		border-radius: 10rpx;
		padding:0 20rpx;
		padding-bottom: 20rpx;
		background-color: #f9f9f9;
		
		.item{
			display: flex;
			justify-content:space-between;
			align-items: center;
			background-color: #fff;
			margin-top: 24rpx;
			padding: 20rpx 30rpx;
			
			.item_name{
				display: flex;
				align-items: center;
				
				&>image{
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>